<template>
	<view class="components-theme">
		<mvBar :mysNavConfig="mysNavConfig"></mvBar>
		<view class='UCenter-bg'>
			<block>
				<view class='text-center'>
					<view class="cu-avatar2 round xl margin-right-sm shadow-blur-lg bg-img open-data"
						style="overflow: hidden;">
						<image src="../../static/img/veizuLogo.jpg" class='png' mode='aspectFit'></image>
					</view>
					<view class="padding text-blue text-xl text-bold">
						你好，{{userinfo.userName}}
					</view>
				</view>
			</block>
		</view>
		<block>
			<view
				class="cu-list menu card-menu margin-top-lg margin-bottom-lg shadow-shop bg-white text-black my-radius sm-border">
				<view class="cu-item">
					<button class='content cu-btn' @click="goInformation">
						<image src='../../static/img/userCenter/userInfo.png' class='png' mode='aspectFit'></image>
						<text class='text-lg margin-sm'>个人资料</text>
					</button>
				</view>
				<view class="cu-item">
					<button class='content cu-btn' @click="goEquipment">
						<image src='../../static/img/userCenter/equipment.png' class='png' mode='aspectFit'></image>
						<text class='text-lg margin-sm'>设备管理</text>
					</button>
				</view>
				<view class="cu-item">
					<button class='content cu-btn' @click="goentrust">
						<image src='../../static/img/userCenter/entrust.png' class='png' mode='aspectFit'></image>
						<text class='text-lg margin-sm'>设备授权</text>
					</button>
				</view>
				<view class="cu-item">
					<button class='content cu-btn' @click="sensorList">
						<image src='../../static/img/userCenter/sensor.png' class='png' mode='aspectFit'></image>
						<text class='text-lg margin-sm'>传感器列表</text>
					</button>
				</view>
				<view class="cu-item">
					<button class='content cu-btn' @click="goSuggestion">
						<image src='../../static/img/userCenter/suggestion.png' class='png' mode='aspectFit'></image>
						<text class='text-lg margin-sm'>意见反馈</text>
					</button>
				</view>
				<view class="cu-item">
					<button class='content cu-btn' @click="instructions">
						<image src='../../static/img/userCenter/instructions.png' class='png' mode='aspectFit'>
						</image>
						<text class='text-lg margin-sm'>操作指南</text>
					</button>
				</view>
			</view>
			<view
				class="cu-list menu card-menu margin-top-lg margin-bottom-lg shadow-shop bg-white text-black my-radius sm-border">
				<view class="cu-item">
					<button class='content cu-btn' @click="changepwd">
						<image src='../../static/img/userCenter/changepwd.png' class='png' mode='aspectFit'></image>
						<text class='text-lg margin-sm'>修改密码</text>
					</button>
				</view>
				<view class="cu-item">
					<button class='content cu-btn' @click="logOut">
						<image src='../../static/img/userCenter/logOut.png' class='png' mode='aspectFit'></image>
						<text class='text-lg margin-sm'>退出登录</text>
					</button>
				</view>
			</view>
		</block>
		<view class="appnumber">
			当前小程序版本:{{PhoneInfo.appNumber}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mysNavConfig: {
					navPadding: true,
					bgColor: "#2979FF",
					isHome: true,
					navTitle: {
						text: "个人中心",
						color: "#ffffff",
						fontSize: "18px",
						fontWeight: "500",
					}
				},
				userinfo: '',
				PhoneInfo: '',
			}
		},
		onLoad() {
			//获取用户名
			this.userinfo = uni.getStorageSync('userinfo');
			//获取小程序版本号
			this.PhoneInfo = this.$utils.GetPhoneInfo();
		},
		methods: {
			//个人资料
			goInformation() {
				uni.redirectTo({
					url: '/pages/userCenter/personalData'
				})
			},
			// 设备管理
			goEquipment() {
				uni.redirectTo({
					url: '/pages/equipmentManage/equipmentList'
				})
			},
			//设备授权
			goentrust() {
				uni.redirectTo({
					url: '/pages/entrust/equipmentEntrust'
				})
			},
			//传感器列表
			sensorList() {
				uni.redirectTo({
					url: '/pages/sensor/sensorList'
				})
			},
			//意见反馈
			goSuggestion() {
				uni.redirectTo({
					url: '/pages/userCenter/opinionlist'
				})
			},
			//操作指南
			instructions() {
				uni.showToast({
					title: '即将上线，敬请期待！',
					icon: 'none',
					mask: true,
				});
			},
			//修改密码
			changepwd() {
				uni.redirectTo({
					url: '/pages/userCenter/changepwd'
				})
			},
			//退出登录
			logOut() {
				uni.removeStorage({
					key: 'userinfo',
					success: function(res) {
						uni.redirectTo({
							url: "../auth/login"
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.UCenter-bg {
		background-image: linear-gradient(to bottom, rgb(41, 121, 255), rgb(239, 242, 246));
		height: 330rpx;
		display: flex;
		justify-content: center;
		overflow: hidden;
		position: relative;
		flex-direction: column;
		align-items: center;
	}

	.UCenter-bg text {
		opacity: 0.8;
	}

	.UCenter-bg image {
		width: 200rpx;
		height: 200rpx;
	}

	.UCenter-bg .gif-wave {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}


	// 头像
	.cu-avatar2 {
		font-variant: small-caps;
		margin: 0;
		padding: 0;
		display: inline-flex;
		text-align: center;
		justify-content: center;
		align-items: center;
		background: #ccc;
		color: #fff;
		white-space: nowrap;
		position: relative;
		width: 150rpx;
		height: 150rpx;
		background-size: cover;
		background-position: center;
		vertical-align: middle;
		font-size: 1.5em;
		z-index: 99;
	}

	.name {
		text-shadow: 2px 2px 1px #2f9bfe;
	}

	.dialog2 {
		background: none;
	}

	.saicode {
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
	}

	.img-big image {
		top: -40px;
		width: 280rpx;
		height: 280rpx;
	}


	.shadow-me {
		box-shadow: 0rpx 0rpx 100rpx 0rpx rgba(0, 0, 0, 0.1);
	}

	.tn-footerfixed {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.35);
	}

	.my_logo {
		background: none;
		padding: 50rpx 0 30rpx 0;
	}

	.my-radius {
		border-radius: 12rpx;
		overflow: hidden
	}

	.my-icon image {
		width: 100rpx;
		height: 100rpx;
		display: inline-block;
		margin: 0 auto
	}

	.my-iconcolor {
		background: rgba(255, 255, 255, 0.96)
	}

	.shadow-shop {
		box-shadow: 0rpx 0rpx 90rpx 0rpx rgba(0, 0, 0, 0.1);
	}

	.qrcode-img {
		position: fixed;
		width: 80rpx;
		height: 80rpx;
		bottom: 350rpx;
		right: 30rpx;
		z-index: 1024;
		opacity: 0.8;
		box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(0, 0, 0, 0.3);
		border: none
	}


	/* 数字背景 */
	.shadow-warp-my {
		position: relative;
		box-shadow: 0 10rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.shadow-warp-my:before,
	.shadow-warp-my:after {
		position: absolute;
		content: "";
		top: 20rpx;
		bottom: 30rpx;
		left: 20rpx;
		width: 50%;
		box-shadow: 0 30rpx 20rpx rgba(0, 0, 0, 0.16);
		transform: rotate(-6deg);
		z-index: -1;
	}

	.shadow-warp-my:after {
		right: 20rpx;
		left: auto;
		transform: rotate(6deg);
	}


	.bg-product {
		background-image: linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0));
		color: #fff;
	}

	.margin-bottom-my {
		margin-bottom: 150rpx;
	}


	// 
	.cu-dialog {
		background: #FFFFFF;
		overflow: visible;
		padding: 300rpx 0 70rpx;
	}

	.modal_bg {
		width: 100%;
		height: 400rpx;
		position: absolute;
		top: -100rpx;
		background-image: url(http://cdn.zhoukaiwen.com/modal_bg.png);
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.modal_main {
		background-color: #FFFFFF;
	}


	.nav-list {
		display: flex;
		flex-wrap: wrap;
		padding: 0px 40upx 0px;
		justify-content: space-between;
	}

	.nav-li {
		padding: 22upx;
		border-radius: 12upx;
		width: 45%;
		margin: 0 2.5% 40upx;
		background-size: cover;
		background-position: center;
		position: relative;
		z-index: 1;
	}

	.nav-li::after {
		content: "";
		position: absolute;
		z-index: -1;
		background-color: inherit;
		width: 100%;
		height: 100%;
		left: 0;
		bottom: -10%;
		border-radius: 10upx;
		opacity: 0.2;
		transform: scale(0.9, 0.9);
	}

	.nav-li.cur {
		color: #fff;
		background: rgb(94, 185, 94);
		box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4);
	}

	.nav-name {
		font-size: 28upx;
		text-transform: Capitalize;
		position: relative;
	}

	.nav-name::before {
		content: "";
		position: absolute;
		display: block;
		width: 40upx;
		height: 6upx;
		background: #fff;
		bottom: 0;
		right: 0;
		opacity: 0.5;
	}

	.nav-name::after {
		content: "";
		position: absolute;
		display: block;
		width: 100upx;
		height: 1px;
		background: #fff;
		bottom: 0;
		right: 40upx;
		opacity: 0.3;
	}

	.nav-name::first-letter {
		font-weight: bold;
		font-size: 36upx;
		margin-right: 1px;
	}

	.nav-li text {
		position: absolute;
		right: 30upx;
		top: 30upx;
		font-size: 52upx;
		width: 60upx;
		height: 60upx;
		text-align: center;
		line-height: 60upx;
	}

	.appnumber {
		margin: auto;
		color: #909399;
		text-align: center;
	}
</style>